<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>前端自动化构建工具webpack项目配置，loader、plugin等应用</title>
</head>

<body>
    <script>
        /**
         * 概念:前端工程化
         * 前端工程化是根据业务特点,将前端开发流程规范化,标准化,它包括了开发流程,技术选型,代码规范,构建发布等,用于提升前端工程师的开发效率和代码质量。
         * 
         * 
         * 自动化前端工具有哪些？
         * 1.Grunt
         * 2.Gulp
         * 3.Fis3
         * 4.Webopack
         **/


 
        /**
         * Webpack的安装(()括号里面是命令行输入的东西)
         * 1.npm包管理工具 全局安装webpack  (npm install webpack webpack-cli -g)  
         * 2.初始化当前项目 (npm init)
         * 3.局部安装webpack (npm install webpack webpack-cli --save-dev)(因为电脑不止一个项目使用webpack，避免冲突局部安装一次),(如果还是出错误就-g全局安装)
         * 4.运行webpack (webpack) (因为版本4的原因，目录下必须要有src/index.js 入口文件)
         * 5.规定webpack处理打包方式-->shell语句和配置文件 (webpack --mode=development)
         * 6.(webpack --watch)开启监听-->自动打包
         * 7.(webpack-dev-server)
         * 8.loader,解析器
         * 9.plugin,插件
         * 10.webpack简单工作流程 找到入口文件-->寻找依赖项-->根据loader(解析器)或plugins(插件)去处理-->生成dist目录
         **/

        /**
         * webpack常用命令
         * webpack --watch(自动监听变化，不用每次操作后都执行webpack命令)
         * webpack-dev-server(开启服务器)
         **/

        /**
         * 
         * Webpack的四个核心
         * 1.入口(entry)
         * 2.输出(output)
         * 3.loader(解析器)
         * 4.插件(plugins)
         * 
         **/
    </script>
</body>

</html>